<template>
  <div 
    class="topNavList"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.4)">
    <div class="box left">
      <!-- 左上 -->
      <!-- 在接口数据中第三位添加  培训人员总数 -->
      <div class="Lt">
        <div class="lt1" v-for="item in navList.slice(1, 2)" :key="item.index"> 
          <div><span class="num" @click="toPage(item)">{{ item.num }}</span></div>
          <p @click="toEchart(item)">{{ item.name }}</p>
        </div>
      </div>
      <!-- 左下 -->
      <div class="Lb">
        <div v-for="item in navList.slice(0,1)" :key="item.index">
          <span @click="toEchart(item)">{{ item.name }}</span>
          <h1 @click="toPage(item)">{{ item.num }}</h1>
        </div>
        <div v-for="item in navList.slice(5,6)" :key="item.index">
          <span @click="toEchart(item)">{{ item.name }}</span>
          <h1 @click="toPage(item)">{{ item.num }}</h1>
        </div>
        <div v-for="item in navList.slice(9,10)" :key="item.index">
          <span @click="toEchart(item)">{{ item.name }}</span>
          <h1 @click="toPage(item)">{{ item.num }}</h1>
        </div>
         <div v-for="item in navList.slice(4,5)" :key="item.index">
          <span @click="toEchart(item)">{{ item.name }}</span>
          <h1 @click="toPage(item)">{{ item.num }}</h1>
        </div>
         <div v-for="item in navList.slice(3,4)" :key="item.index">
          <span @click="toEchart(item)">{{ item.name }}</span>
          <h1 @click="toPage(item)">{{ item.num }}</h1>
        </div>
         <div v-for="item in navList.slice(2,3)" :key="item.index">
          <span @click="toEchart(item)">{{ item.name }}</span>
          <h1 @click="toPage(item)">{{ item.num }}</h1>
        </div>
      </div>
    </div>
    <div class="box mid">
      <!-- 地图容器 -->
      <div class="map"></div>
    </div>
    <div class="box right">
       <!-- 右下 -->
      <div class="Rb">
         <div class="rt1" v-for="item in navList.slice(7, 8)" :key="item.index">
          <div><span class="num" >{{ item.num }}</span></div>
          <p>{{ item.name }}</p>
        </div>
      </div>
    <!-- 右上 -->
      <div class="Rt">
        <!-- <div class="nav_bar"></div> -->
        <div v-for="item in navList.slice(10, 14)" :key="item.index">
          <span @click="toEchart(item)">{{ item.name }}</span>
          <h1>{{ item.num }}</h1>
        </div>
        <div v-for="item in navList.slice(6, 7)" :key="item.index">
          <span @click="toEchart(item)">{{ item.name }}</span>
          <h1>{{ item.num }}</h1>
        </div>
        <div v-for="item in navList.slice(8, 9)" :key="item.index">
          <span @click="toEchart(item)">{{ item.name }}</span>
          <h1>{{ item.num }}</h1>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import china from '@/assets/map/china.json'//引入地图文件
import hebei from '@/assets/map/hebei.json'
export default {
  // name: 'nav',
  data() {
    return {
      // 控制加载动画
      loading: false,
      navList: [],
       points: [//散点
        { name: '河北', value: [114.853094, 39.877052], itemStyle: { color: '#00EEFF' } }, // 河北
       ]
    };
  },
  created() {
  },
  mounted() {
    // this.getDar(document.querySelector(".nav_bar", ""));
    this.getMap(document.querySelector(".box .map"));
    // this.getHbei(document.querySelector(".box .map"))
    this.getDateList()
  },
  methods: {
    // 获取导航数据()
    async getDateList() {
    // 获取数据前，加载动画显示
      this.loading = true
      const {data: res} = await this.$http.get('http://172.16.1.170:8080/cxdsj/dsjAction.dhSelect.do')
      // console.log('nav111', res);
      let newRes = res.substring(5)
      let nav = eval('('+ newRes +')')
      // console.log('nav',nav)
      this.navList = nav
      // 数据渲染完成  加载动画不显示
      this.loading = false
    },
    getMap(domName){
      const myChart = echarts.init(domName);
      // 散点地图
      const option = {
        geo: {//地图配置
          map: 'china',
           label: { // 图形上的文本标签
            normal: {// 通常状态下的样式
              show:false,
              textStyle: {
                fontSize: 10,
                color: '#fff'
              }
            },
            emphasis: {// 鼠标放上去样式
              fontSize: 15,
              textStyle: {
                color: '#fff'//鼠标放上去文字的颜色
              }
            }
          },
          // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，
          // 可以设置成 'scale' 或者 'move'。设置成 true 为都开启
          // roam: true,
          zoom: 1.2, //缩放比例  地图大小
          itemStyle: {// 地图区域的样式设置
            normal: { // 通常状态下的样式
              borderColor: '#5089EC',
              borderWidth: 1,
              areaColor: { //地图区域的颜色
                type: 'radial', // 径向渐变
                x: 0.5, // 圆心
                y: 0.5,// 圆心
                r: 0.8,// 半径
                colorStops: [
                  { // 0% 处的颜色
                    offset: 0,
                    color: 'rgba(0, 102, 154, 0)'
                  },
                  { // 100% 处的颜色
                    offset: 1,
                    color: 'rgba(0, 102, 154, .4)'
                  }
                ]
              }
            },
            // 鼠标放上去高亮的样式
            emphasis: {
              areaColor: '#2386AD',
              borderWidth: 0
            }
          }
        },
        series: [
          { // 散点系列数据
            type: 'effectScatter',// 带有涟漪特效动画的散点（气泡）图
            coordinateSystem: 'geo', //该系列使用的坐标系:地理坐标系
            // 特效类型,目前只支持涟漪特效'ripple'，意为“涟漪”
            effectType: 'ripple',
            // 配置何时显示特效。可选'render'和'emphasis' 。
            showEffectOn: 'render',
            rippleEffect: { // 涟漪特效相关配置。
              period: 10, // 动画的周期，秒数。
              scale: 4,// 动画中波纹的最大缩放比例。
              // 波纹的绘制方式，可选 'stroke' 和 'fill'。
              brushType: 'stroke'
            },
            zlevel: 1, // 所有图形的 zlevel 值。
            data: this.points
          },
        ]
      }
      // 热力地图
      // const option = {
      //   series:[ 
      //     {
      //       type: 'map',
      //       map: 'china',
      //       // data: [{name: '', value: ''}],
      //       data: [
      //         {name:'河北', value: '34281'}
      //       ],
      //       label: {//文字 样式
      //         show: false,
      //         fontSize: 10,
      //         color: '#fff'//文字颜色
      //       },
      //       itemStyle: {//区域样式
      //         // areaColor: '#a5c261',
      //         borderColor: '#5089EC',//边框颜色
      //         borderWidth: 1,
      //         areaColor: { //地图区域的颜色
      //           type: 'radial', // 径向渐变
      //           x: 0.5, // 圆心
      //           y: 0.5,// 圆心
      //           r: 0.8,// 半径
      //           colorStops: [
      //             { // 0% 处的颜色
      //               offset: 0,
      //               color: 'rgba(0, 102, 154, 0)'
      //             },
      //             { // 100% 处的颜色
      //               offset: 1,
      //               color: 'rgba(0, 102, 154, .4)'
      //             }
      //           ]
      //         }
      //       },
      //       zoom: 1.1, //缩放比例  地图大小
      //       emphasis: {//鼠标放上 高亮样式
      //         label: {// 鼠标放上文字样式
      //           color: '#fff',
      //           fontSize: 15
      //         },
      //         itemStyle: {//鼠标放上区域样式
      //           // areaColor: '#5ac3e7',
      //           borderWidth: 0
      //         },
      //       }
      //     }
      //   ],
      //   visualMap: {//visualMap 是视觉映射组件
      //     show: true,
      //     left: '5%',
      //     bottom :'2%',
      //     min: 1,
      //     max: 50000,
      //     // text: ['High', 'Low'],
      //      text:[''],
      //     realtime: false,//拖拽时，是否实时更新。
      //     calculable: true,//是否显示拖拽用的手柄（手柄能拖拽调整选中范围）。
      //     itemHeight: 120,//即长条的高度。
      //     itemWidth: 15,//长条的宽度。
      //     inRange: {//定义 在选中范围中 的视觉元素。
      //       color: ['#219edb', 'yellow', 'orangered']// 图元的颜色。
      //     }
      //   },
      // } 
      // // 地图注册，第一个参数的名字必须盒option.geo.map一致
      echarts.registerMap('china', china)
       myChart.setOption(option)
        //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
     },
    //  河北地图
     getHbei (domName) {
      const myChart = echarts.init(domName);
      const option = {
        geo: {
            show: true,
            map: 'hebei',
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: '#fff'
                }
              },
              emphasis: {// 鼠标放上去高亮的样式
                textStyle: {
                  color: '#fff'//鼠标放上去文字的颜色
                }
              }
            },
            zoom: 1.1,
            roam: true,
            itemStyle: {// 地图区域的样式设置
            normal: { // 通常状态下的样式
              borderColor: '#5089EC',
              borderWidth: 1,
              areaColor: { //地图区域的颜色
                type: 'radial', // 径向渐变
                x: 0.5, // 圆心
                y: 0.5,// 圆心
                r: 0.8,// 半径
                colorStops: [
                  { // 0% 处的颜色
                    offset: 0,
                    color: 'rgba(0, 102, 154, 0)'
                  },
                  { // 100% 处的颜色
                    offset: 1,
                    color: 'rgba(0, 102, 154, .4)'
                  }
                ]
              }
            },
            // 鼠标放上去高亮的样式
            emphasis: {
              areaColor: '#2386AD',
              borderWidth: 0
            }
          }
        }       
      };
      // 地图注册，第一个参数的名字必须盒option.geo.map一致
      echarts.registerMap('hebei', hebei)
      myChart.setOption(option)
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });       
     },

    // 跳转到相应图表位置
     toEchart(item) {
      if(document.querySelector(`#${item.name}`)) {
        // 跳转到对应id的盒子
        document.querySelector(`#${item.name}`).scrollIntoView({behavior: 'smooth'})
      }
    },
    // 左上
    toPage(item) {
      switch (item.name) {
        case '诚信注册企业总数':
          window.open('http://121.28.100.36:8192/cxrd/frontArticle.zcList.do')
          break
        case '等级发布企业总数':
          window.open('http://121.28.100.36:8192/cxrd/frontArticle.do')
          break
        case '当前黑名单企业总数':
          window.open('http://121.28.100.36:8192/cxrd/frontArticle.hmdlist.do')
          break
        case '信用信息采集总数':
          window.open('http://121.28.100.36:8192/cxrd/frontArticle.do')
          break
      }
    }, 
  },
};
</script>

<style lang="less" scoped>
.topNavList {
  margin-top: 30px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  height: 500px;
  .box {
    // flex: 3.5;
    position: relative;
    height: 100%;
    width: 30%;
    // border: 1px solid #1480f0;
    &:nth-child(2) {
      width: 39%;
      // border: 1px solid #1480f0;
    }
    & /deep/ .el-input__inner {
      background-color: transparent !important;
      max-width: 120px !important;
      max-height: 30px !important;
      color: #fff;
    }
  }
  .left {
    .Lt {
      padding: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 7px;
      margin-bottom: 10px;
      height: 130px;
      font-size: 18px;
      text-align: center;
      background: url(@/static/images/topImg/border.png) no-repeat;
      background-size: 100% 100%;
      .num {
        color: #efbc54;
        font-size: 55px;
        font-weight: bold;
        font-family: 'electronicFont';
      }
      p {
        color: #5ac3e7;
        margin-top: 8px;
        font-size: 16px;
      }
    }
    .Lb {
      padding: 20px;
      display: flex;
      flex-wrap: wrap;
      height: 350px;
      margin-top: 8px;
      // margin-bottom: 5px;
      justify-content: space-between;
      background: url(@/static/images/topImg/k_4.png);
      background-size: 100% 100%;
      & > div {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        // width: 50%;
        // height: 30%;
         width: 30%;
        height: 50%;
        h1 {
          color: #5ac3e7;
          font-size: 40px;
          font-weight: bold;
          font-family: 'electronicFont';
        }
        span {
          margin-bottom: 5px;
          color: #fff;
          font-size: 13px;
        }
      }
    }
  }
  .mid {
    background: url(@/static/images/topImg/k_3.png);
    background-size: 100% 100%;
    .map {
      width: 100%;
      height: 100%;
    }
  }
  .right {
    .Rt {
      padding: 20px;
      display: flex;
      flex-wrap: wrap;
      height: 350px;
      margin-top: 10px;
      // margin-bottom: 10px;
      background: url(@/static/images/topImg/k_4.png);
      background-size: 100% 100%;

      & > div {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 50%;
        height: 30%;
        h1 {
          color: #5ac3e7;
          font-size: 40px;
          font-weight: bold;
          font-family: 'electronicFont';
        }
        span {
          margin-bottom: 8px;
          color: #fff;
          font-size: 12px;
        }
      }
    }
    // 右上
    .Rb {
      padding: 0 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 7px;
      height: 130px;
      font-size: 18px;
      text-align: center;
      background: url(@/static/images/topImg/border.png) no-repeat;
      background-size: 100% 100%;
      .num {
        color: #efbc54; 
        font-size: 55px;
        font-weight: bold;
        font-family: 'electronicFont';
      }
      p {
        color: #5ac3e7;
        margin-top: 8px;
        font-size: 16px;
      }
    }
  }
}
</style>